<!DOCTYPE html>
<html lang="en">

<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/resourceindex.css">
    <link rel="stylesheet" rev="stylesheet" href="static/layui/css/layui.css" type="text/css" media="all">
    <script type="text/javascript" src="static/layui/layui.js"></script>
    <script src="static/js/vue.js"></script>
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>

    <title>梦寒君资源分享</title>
    <style>
        .layui-layer-rim{
            border: 2px solid #8D8D8D;
        }

        .link-btn{
            background-color: transparent;
            border: none;
            padding: 0;
            font-size: 20px;
            /*width: 200px;*/
        }
        .link-btn:hover {
            color: #000000ab;
            cursor: pointer;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .el-select  {
            width: 130px;
        }
        .select-from{
            color: #0C0C0C;
        }


        body {
            margin: 0;
            overflow: hidden;
        }
        .background-iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 在其他内容后面 */
            border: none;
        }
        /*设置分页条背景为透明*/
        .el-pagination button{
            background-color: #fff0 !important;
        }
        .el-pager li{
            background-color: #fff0 !important;
        }

        .el-input--suffix{
            background-color: #fff !important;
        }

        .el-button:focus, .el-button:hover {
            color: #057aff !important;
            border-color: #f8fbff !important;
            background-color: #ffffff !important;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>

<body>
<iframe src="goto/background.ftl" class="background-iframe"></iframe>
<div id="app">
    <div style="width: 100%;">

        <div style="position: fixed;width: 100%;" id="headerDiv">
            <header id="header">
                <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
                <#--手机打开时的搜索框-->
                <div v-if="isMobileFlag" style="width: 50%">
                    <el-input size="mini" style="width: 240px"  placeholder="请输入内容" v-model="queryContent" class="input-with-select select-from">
                        <el-select style="width: 70px" v-model="type" slot="prepend" placeholder="资源类型">
                            <el-option label="全部类型" value=""></el-option>
                            <el-option v-for="type in typeList" :label="type.title" :value="type.value"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="queryMethod"></el-button>
                    </el-input>
                </div>
                <#--非手机打开时的搜索框-->
                <div v-if="!isMobileFlag" style="width: 50%">
                    <el-input size="medium"   placeholder="请输入内容" v-model="queryContent" class="input-with-select select-from">
                        <el-select  v-model="type" slot="prepend" placeholder="资源类型">
                            <el-option label="全部类型" value=""></el-option>
                            <el-option v-for="type in typeList" :label="type.title" :value="type.value"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="queryMethod"></el-button>
                    </el-input>
                </div>
            </header>

            <el-menu class="el-menu-demo" id="nav" mode="horizontal" active-text-color="#000000" text-color="#575151"  @select="handleSelect">
                <el-menu-item v-if="!isMobileFlag" v-for="item in navList"  :index="item.title.toString()" :id="'menu'+item.position">{{item.title}}</el-menu-item>
                <el-submenu v-if="isMobileFlag">
                    <template slot="title">资源类型</template>
                    <el-menu-item v-for="item in navList"  :index="item.title.toString()" :id="'menu'+item.position">{{item.title}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
    <div id="topDiv"></div>
    <#--文案哲理显示区域-->
    <iframe id="textifr" src="goto/textList.ftl" style="width: 100%;height: 800px;border: 0px" v-if="selectNav=='文案哲理'"></iframe>
    <#--其他工具显示区域-->
    <iframe id="textifr" src="goto/toolList.ftl" style="width: 100%;height: 800px;border: 0px" v-if="selectNav=='其它工具'"></iframe>
    <#--其他工具显示区域结束-->
    <div class="container" id="container">
        <#--资源显示区域-->
        <div  id="resourcesdiv" v-if="selectNav!='网站首页' && selectNav!='文案哲理' && selectNav!='其它工具' && selectNav!=''">
            <el-empty description="暂无资源" v-if="dataList.length==0"></el-empty>
            <div style="margin-top: 15px"  v-if="dataList.length>0">
                <el-button size="small" @click="orderMethod('T',selectNav)">最新</el-button><el-button size="small" @click="orderMethod('C',selectNav)">最热</el-button>
            </div>
            <div class="free-resources" v-if="dataList.length>0">
                <h2>{{selectNav[0]}}</h2>
                <div class="resources">
                    <div class="resource" v-for="(item,index) in dataList" :key="item.title+index">
                        <img :src="item.cover" :alt="item.title" class="coverimg" @click="viewDetails(item.resourceId)">
                        <h2 class="text-lg font-bold mt-2" @click="viewDetails(item.resourceId)"><button class="link-btn">{{item.title}}</button></h2>
                        <p class="text-sm" v-html="item.description"></p>
                        <p class="res-info">
                            发布者：{{item.uploaderName}}
                            <i class="el-icon-thumb" style="margin-left:30px"></i>{{item.clickCount}}
                        </p>
                        <p class="res-info"><i class="el-icon-view"></i>{{item.createdAt}}</p>
                    </div>
                </div>
            </div>
            <div class="pagination" v-if="dataList.length>0">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page="pageNo"
                        :page-size="pageSize"
                        layout="total,prev, pager, next, jumper"
                        :total="totalSize">
                </el-pagination>
            </div>
        </div>
        <#--资源显示区域结束-->
        <#--网站首页显示区域-->
        <div id="resourcesdiv" v-if="selectNav=='网站首页'">
            <#--轮播图区域-->
            <div style="padding-top:10px">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in 6" :key="item">
                        <h3 class="medium">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div style="margin-top: 15px">
                <el-button size="small" @click="orderMethod('T',selectNav)">最新</el-button><el-button size="small" @click="orderMethod('C',selectNav)">最热</el-button>
            </div>
            <div class="free-resources" v-for="(item,index) in dataList" :key="'title'+index">
                <button class="link-btn" @click="handleSelect('',[item.title])"><h2>{{item.title}}</h2></button>
                <div class="resources" >
                    <div class="resource" v-for="res in item.data" :key="res.title+index">
                        <img :src="res.cover" :alt="res.title" class="coverimg" @click="viewDetails(res.resourceId)">
                        <h2 class="text-lg font-bold mt-2" @click="viewDetails(res.resourceId)"><button class="link-btn">{{res.title}}</button></h2>
                        <p class="text-sm" v-html="res.description"></p>
                        <p class="res-info">
                            发布者：{{res.uploaderName}}
                            <i class="el-icon-thumb" style="margin-left:30px"></i>{{res.clickCount}}
                        </p>
                        <p class="res-info"><i class="el-icon-time"></i>{{res.createdAt}}</p>
                    </div>
                </div>
            </div>
        </div>
        <#--网站首页显示区域结束-->

        <#--资源搜索显示区域-->
        <div  id="resourcesdiv" v-if="selectNav==''">
            <el-empty description="暂无资源" v-if="dataList.length==0"></el-empty>
            <div style="margin-top: 15px"  v-if="dataList.length>0">
                <el-button size="small" @click="orderMethod('T',selectNav)">最新</el-button><el-button size="small" @click="orderMethod('C',selectNav)">最热</el-button>
            </div>
            <div class="free-resources" v-if="dataList.length>0">
                <h2>{{selectNav[0]}}</h2>
                <div class="resources">
                    <div class="resource" v-for="(item,index) in dataList" :key="item.title+index">
                        <img :src="item.cover" :alt="item.title" class="" @click="viewDetails(item.resourceId)">
                        <h2 class="text-lg font-bold mt-2" @click="viewDetails(item.resourceId)"><button class="link-btn">{{item.title}}</button></h2>
                        <p class="text-sm" v-html="item.description"></p>
                        <p class="res-info">
                            发布者：{{item.uploaderName}}
                            <i class="el-icon-thumb" style="margin-left:30px"></i>{{item.clickCount}}
                        </p>
                        <p class="res-info"><i class="el-icon-time"></i>{{item.createdAt}}</p>
                    </div>

                </div>
            </div>
            <div class="pagination" v-if="dataList.length>0">
                <el-pagination
                        @current-change="queryHandleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page="pageNo"
                        :page-size="pageSize"
                        layout="total,prev, pager, next, jumper"
                        :total="totalSize">
                </el-pagination>
            </div>
        </div>
        <#--资源搜索显示区域结束-->

    </div>

   <#-- <el-drawer
            title="其它工具"
            :visible.sync="drawer"
            direction="rtl">
        <div style="padding: 20px;">
            <el-collapse>
                <el-collapse-item title="聊天GPT" name="1">
                    <div>聊天GPT,支持GPT3.5、GPT4.0、文心一言3.0。<el-link type="primary" href="http://121.5.106.133:8888/chatgpt/goto/chatindex">点此跳转</el-link></div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </el-drawer>-->

    <#--悬浮工具区域-->
    <div id="floating-block">
        <div class="tool-div"><i class="el-icon-document"></i>免责声明</div>
        <div class="tool-div"><i class="el-icon-chat-line-square"></i>联系我们</div>
        <div class="tool-div"><i class="el-icon-document-add"></i>文案投稿</div>
        <div class="tool-div" id="login"><i class="el-icon-thumb" ></i>登录网站</div>
    </div>
</div>

<footer>
    <p>© 2023 Resource Sharing. All rights reserved.</p>
</footer>
</body>

<script>

    var $,layer;
    var username = localStorage.getItem("username");
    var token = localStorage.getItem("token");
    var userid = localStorage.getItem("userid");

    new Vue({
        el:'#app',
        data:{
           /* drawer: false,*/
            queryContent:'',
            type:'',
            navList:[],
            typeList:[],
            selectNav:'网站首页',//是否是文案哲理
            isMobileFlag:isMobileDevice(),//是否是手机
            dataList:[],
            pageSize:15,
            pageNo:1,
            totalSize:0,
            order:'T'//T是时间,C是热度
        },
        methods:{
            /**
             * 排序方法
             * @param value
             * @param keyPath
             */
            orderMethod(value,keyPath){

                this.order = value;
                if(keyPath=='网站首页'){
                    this.initMain();
                }else if(this.selectNav==''){//说明是搜索
                    this.query();
                }else{
                    this.getResourcesList(keyPath);
                }
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getResourcesList();
            },
            queryHandleCurrentChange(val) {
                this.pageNo = val;
                this.query();
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            queryMethod(){
                this.query(1);
            },
            /**
             * 搜索方法
             */
            query(page){
                this.selectNav = '';
                if(page!=null&&page!=''){
                    this.pageNo = page;
                }
                axios.get('resources/getResourcesList?title='+this.queryContent+'&type='+this.type+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize+'&order='+this.order+'&queryFlag=Y',{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.dataList = resp.data.data;
                        this.totalSize = resp.data.total;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            viewDetails(resid){
                axios.get('resources/addClikCount?resourceId='+resid,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(err=>{
                    console.log(err);
                })

                window.open("/resourcesharing/goto/resourcedetails?resid="+resid,"/resourcesharing/goto/resourcedetails?resid="+resid)
            },
            /**
             * 获取资源列表
             */
            getResourcesList(keyPath){
                var type = this.type;
                if(keyPath!=null&&keyPath!=''){
                    type = keyPath;
                }
                axios.get('resources/getResourcesList?type='+type+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize+'&order='+this.order,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.dataList = resp.data.data;
                        this.totalSize = resp.data.total;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            /**
             * 初始化首页
             */
            initMain(){
                axios.get('resources/initMainPage?order='+this.order,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.dataList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            handleSelect(key, keyPath) {
                if(keyPath=='其它工具'){//是更多工具，打开侧边区域
                    //this.drawer = true;
                }
                if(keyPath=='网站首页'){//网站首页
                    this.initMain();
                }
                if(keyPath!='其它工具'&&keyPath!='网站首页'&&keyPath!='文案哲理'){
                    this.getResourcesList(keyPath);
                }
                this.selectNav = keyPath;
            },
            initNav(){
                axios.get('bar/initNav',{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.navList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            initType(){
                axios.get('bar/initType',{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.typeList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }

        },
        created(){
            this.initNav();
            this.initType();
            this.initMain();
        },
        updated(){
            var topHeight = document.getElementById('headerDiv').offsetHeight;
            document.getElementById('topDiv').style.height = topHeight+'px';
            if(isMobileDevice()){
                document.getElementById("container").style.height = (screenHeight-topHeight)+'px';
            }
        }
    })



    layui.use('layer', function() { //独立版的layer无需执行这一句
        $ = layui.jquery;
        layer = layui.layer; //独立版的layer无需执行这一句

        $('#login').on('click', function(){
            var othis = $(this);
            var width = '450px';
            var height = '450px';
            if(isMobileDevice()){
                width = '350px';
                height = '400px';
            }
            layer.open({
                type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title:'欢迎回来',
                area: [width, height],   //宽高
                skin: 'layui-layer-rim',    //样式类名
                content: "goto/login",               //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
                shade: 0
            });
        });

    })


    /**
     * 初始化
     */
    function init() {
        if(userid!=null){//说明登录过，向后台请求，判断有没有过期
            $.get('user/userLogin?userid='+userid+"",function (response) {
                if(response.code==200){
                    if(response.data==false){//说明登录过期,刷新
                        localStorage.removeItem("username");
                        localStorage.removeItem("token");
                        localStorage.removeItem("userid");
                        window.location.reload();
                    }else{//加载用户名称和头像


                    }
                }else{
                    layer.msg(response.msg,function () {});
                }
            },'json')
        }
    }



        // 检测用户是否使用移动设备
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    var screenHeight = window.innerHeight;


    // 如果是移动设备，则调整 div 的 padding
    if (isMobileDevice()) {
         // 获取图片元素
        var img = document.getElementById('logo');
        // 设置图片样式
        img.style.height = "50px";
        img.style.width = "100px";
        //设置搜索区域样式
        var searchdivs = document.getElementsByClassName("search");
       // query.style.verticalAlign="bottom";

        //document.getElementById("nav").style.display = "none";
        //document.getElementById("container").style.paddingBlock = "40%"; // 设置移动设备的 padding
        //document.getElementById("container").style.height = screenHeight-screenHeight*0.4+'px';
        document.getElementById("container").style.paddingLeft = "5%";
        document.getElementById("container").style.paddingRight = "5%";
        //设置分页条样式
        // 获取所有带有.pagination类的元素
        var paginationElements = document.querySelectorAll('.pagination a');
        // 遍历每个元素并为其添加样式
        for (var i = 0; i < paginationElements.length; i++) {
            paginationElements[i].style.paddingTop = '8px';
            paginationElements[i].style.paddingRight = '10px';
            paginationElements[i].style.paddingBottom = '8px';
            paginationElements[i].style.paddingLeft = '10px';
        }
    }else{
        document.getElementById("container").style.maxHeight = "500px"
    }


    // 拖拽悬浮工具区域
    var floatingBlock = document.getElementById('floating-block');
    let offsetX, offsetY;

    // 鼠标按下时记录偏移量
    floatingBlock.addEventListener('mousedown', (e) => {
        offsetX = e.clientX - floatingBlock.getBoundingClientRect().left;
        offsetY = e.clientY - floatingBlock.getBoundingClientRect().top;
        floatingBlock.style.cursor = 'grabbing';
    });

    // 鼠标移动时更新悬浮块位置
    document.addEventListener('mousemove', (e) => {
        if (offsetX !== undefined && offsetY !== undefined) {
            let innerWidth =  window.innerWidth;
            floatingBlock.style.right = innerWidth-e.clientX - offsetX+'px';
            floatingBlock.style.top = e.clientY - offsetY+'px';
        }
    });

    // 鼠标松开时清除偏移量
    document.addEventListener('mouseup', () => {
        offsetX = undefined;
        offsetY = undefined;
        floatingBlock.style.cursor = 'grab';
    });
</script>

</html>
